<template>
  <div class="app-container">
    <div class="infoTitle">
      <span>图表统计信息</span>
    </div>
    <div style="margin-top: 18px">
      <el-radio-group v-model="radio" @change="radioChange">
        <el-radio-button label="年"></el-radio-button>
        <el-radio-button label="季度"></el-radio-button>
      </el-radio-group>
      <div :style="{height:eheight,width:echartsWidth}"
           ref="byYear"></div>
    </div>
    <div class="infoTitle">
      数据统计信息
    </div>
    <div style="margin-top: 18px">

      <el-checkbox label="环比" style="color: #00afff" v-model="hbchecked"></el-checkbox>
      <el-checkbox label="同比" style="color: #a95812" v-model="tbchecked" v-if="hbShow"></el-checkbox>
      <el-table :data="tabList1" border>
        <el-table-column label="序号" type="index" width="55" align="center" />
        <el-table-column label="时间" align="center" prop="sj"/>
        <el-table-column label="销售成本（单位：万）" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.sc}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.sc - scope.row.hsc)/scope.row.sc * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.sc - scope.row.tsc)/scope.row.sc * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="管理成本（单位：万）" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.mc}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.mc - scope.row.hmc)/scope.row.mc * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.mc - scope.row.tmc)/scope.row.mc * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="财务成本（单位：万）" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.fc}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.fc - scope.row.hfc)/scope.row.fc * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.fc - scope.row.tfc)/scope.row.fc * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="研发成本（单位：万）" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.rdc}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.rdc - scope.row.hrdc)/scope.row.rdc * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.rdc - scope.row.trdc)/scope.row.rdc * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="缴税金额（单位：万）" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.yjsf}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.yjsf - scope.row.hyjsf)/scope.row.yjsf * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.yjsf - scope.row.tyjsf)/scope.row.yjsf * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="资产减值损失（单位：万）" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.ail}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.ail - scope.row.hail)/scope.row.ail * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.ail - scope.row.tail)/scope.row.ail * 100| numFilter }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="信用减值损失（单位：万）" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.cil}}</span>
            <span style="color: #00afff;margin-left: 10px" v-if="hbchecked">{{(scope.row.cil - scope.row.hcil)/scope.row.cil * 100| numFilter }}%</span>
            <span style="color: #a95812;margin-left: 10px" v-if="tbchecked">{{(scope.row.cil - scope.row.tcil)/scope.row.cil * 100| numFilter }}%</span>
          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
  import { storeCostByTime } from "@/api/manage/datacount";
  import echarts from 'echarts'
  export default {
    name: "incomecount",
    components: {},
    filters: {
      numFilter (value) {
        if(value == Infinity || value == -Infinity ||isNaN(value)){
          return 0
        }
        // 截取当前数据到小数点后两位
        return parseFloat(value).toFixed(2)
      }
    },
    // An highlighted block
    watch: {
      $route(){
        this.getList1();
      }
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        echartsWidth: '100%',
        eheight: '400px',
        // 总条数
        total: 0,
        // 便利蜂分店信息表格数据
        tabList1: [],
        radio:'年',
        queryParam:{
          type:1
        },
        checkList:[],
        hbchecked:false,
        tbchecked:false,
        hbShow:false,
      };
    },
    created() {
      this.getList1();
    },
    methods: {
      /** 查询便利蜂分店信息列表 */
      getList1() {
        storeCostByTime(this.queryParam).then(response => {
          this.tabList1 = response.data;
          this.drawE1(this.tabList1,'便利蜂成本统计表');
        });
      },
      drawE1(countData, title) {
        let keyName = []
        let sc = []
        let mc = []
        let fc = []
        let rdc = []
        let yjsf = []
        let ail = []
        let cil = []
        countData.forEach(item =>{
          keyName.push(item.sj);
          sc.push(item.sc)
          mc.push(item.mc)
          fc.push(item.fc)
          rdc.push(item.rdc)
          yjsf.push(item.yjsf)
          ail.push(item.ail)
          cil.push(item.cil)
        })
        let myChart = echarts.init(this.$refs.byYear);
        // 绘制图表
        myChart.setOption({
          legend: {
            data: ["销售成本（万）","管理成本（万）","财务成本（万）","研发成本（万）","纳税金额（万）","资产减值损失（万）","信用减值损失（万）"],
            top: '0%'
          },
          // color: ['#3398DB'],
          title: {title},
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'       // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          xAxis: {
            data: keyName,
            name: '时间'
          },
          yAxis: {},
          series: [{
            name: '销售成本（万）',
            type: 'bar',
            data: sc
          },{
            name: '管理成本（万）',
            type: 'bar',
            data: mc
          },{
            name: '财务成本（万）',
            type: 'bar',
            data: fc
          },{
            name: '研发成本（万）',
            type: 'bar',
            data: rdc
          },{
            name: '纳税金额（万）',
            type: 'bar',
            data: yjsf
          },{
            name: '资产减值损失（万）',
            type: 'bar',
            data: ail
          },{
            name: '信用减值损失（万）',
            type: 'bar',
            data: cil
          }]
        })
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      radioChange(val){
        if(val == '年'){
          this.queryParam.type = 1
          this.hbShow = false
          this.tbchecked =false
        }else if(val == '季度'){
          this.queryParam.type = 2
          this.hbShow = true
        }
        this.getList1()
      },
    }
  };
</script>
<style scoped>
  .infoTitle {
    height: 36px;
    background-color: #f9f9f9;
    padding-left: 23px;
    line-height: 36px;
    color: #333;
    font-size: 14px;
    margin-bottom: 18px;
  }

</style>
